<style lang="scss" scoped>
    .folding-buttons {
        position: relative;
        font-size: 0;

        .main-cont {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            padding-left: 4px;
            max-height: 25px;

            &.more::after {
                content: '...';
                position: absolute;
                right: 5px;
                display: inline-block;
                cursor: pointer;
                background: #FFF;
                border: 1px solid #DCDFE6;
                color: #606266;
                text-align: center;
                box-sizing: border-box;
                outline: 0;
                margin: 0;
                font-weight: 500;
                padding: 0 12px;
                font-size: 14px;
                border-radius: 2px;
                height: 24px;
            }
        }

        .popup-cont {
            display: none;
            width: 100%;
            top: -5px;
            left: 0;
            position: absolute;
            z-index: 999;
            place-content: center flex-end;
            align-items: flex-end;
            flex-flow: row wrap;
            background: #fff;
            white-space: normal;
            padding: 5px 5px 0 0;
            border-radius: 3px;
            box-shadow: 0 0 5px rgba(#000, .3);
            &:hover {
                display: flex;
            }

            button {
                margin-bottom: 5px;
            }

            span {
                display: inline-block !important;
            }
        }

        .hover-box {
            position: absolute;
            right: 5px;
            top: 0;
            width: 35px;
            height: 24px;
            cursor: pointer;
        }

        &.up .popup-cont {
            top: inherit;
            bottom: -4px;
        }
    }

    

</style>
<template>
    <div ref="f-btns" class="folding-buttons">
        <div ref="main-cont" class="main-cont" :class="{more:popup}">
            <slot></slot>
        </div>
        <div class="hover-box" v-if="popup" @click="showPopup" @mouseover="mouseover"></div>
        <div class="popup-cont animated fadeIn" ref="popupCont" v-if="popup">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    import ResizeObserver from 'resize-observer-polyfill'
    export default {
        name: 'ui-buttons',
        props: {
            hover: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                $btns: null,
                popup: false,
                popupStyle: "display: flex;place-content: center flex-end;align-items: flex-end;flex-flow: row wrap;background: #fff;white-space: normal;padding: 5px 5px 0 0;border-radius: 3px;box-shadow: 0 0 5px rgba(#000, .3);"
            }
        },
        mounted() {

            this.$nextTick(() => {

                this.$btns = this.$refs['f-btns']
                // console.log(this.$btns.clientWidth)
                let $items = this.$btns.querySelector('.main-cont').querySelectorAll('button')
                let arr = []
                $items.forEach((value) => {
                    if (value.style.display !== 'none') {
                        arr.push(value)
                    }
                })
                $items = arr

                // 首次进入初始化并监听容器，当容器因为内容增减发生缩放后，按钮组组件执行一次初始化
                const resizeObserver = new ResizeObserver(() => {
                    this.init(this.$btns, $items)
                })
                resizeObserver.observe(this.$btns)
            })

            this.$eventHub.$on('btnsReload', () => {
                let $items = this.$btns.querySelector('.main-cont').querySelectorAll('button')
                this.init(this.$btns, $items)
            })
        },
        methods: {
            init($btns, $items) {

                this.$btns.removeEventListener('mouseenter', this.listener, false)

                // 容器宽度
                let contWidth = $btns.clientWidth

                // 干掉父级的overflow：hidden
                if ($btns.parentElement) {
                    $btns.parentElement.style.overflow = 'inherit'
                }

                // 生成弹出框
                let itemTotalWidth = 0
                for (let i = 0, len = $items.length; i < len; i++) {
                    itemTotalWidth += ($items[i].clientWidth + 7)
                    // console.log(itemTotalWidth, contWidth)
                    if (itemTotalWidth - 30 > contWidth) {
                        this.popup = true
                        break
                    } else {
                        this.popup = false
                    }
                }

                // 懒加载弹出框，当鼠标移动到按钮上后才显示，减小浏览器渲染压力
                $btns.addEventListener('mouseenter', this.listener, false)
            },
            listener() {
                let $btn = this.$btns.getBoundingClientRect()
                let $table = this.$bui.findCompUpward(this, 'ui-main').$el.querySelector('.el-table')
                    .getBoundingClientRect()

                // 按钮到底部向上浮动
                if (($btn.top + $btn.height + 50) > ($table.top + $table.height)) {
                    this.$btns.className += ' up'
                }

                this.$btns.removeEventListener('mouseenter', this.listener, false)
            },
            showPopup() {
                this.$refs.popupCont.style = this.popupStyle
                setTimeout(() => {
                    this.$refs.popupCont.style = ''
                }, 500);
            },
            mouseover() {
                if (this.hover) this.showPopup()
            }
        },
        destroyed(){
            this.$eventHub.$off('btnsReload')
        },
    }

</script>
